<template>
    <div class="index">
        <Header></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i>></i>风险评估及资源调查 <i>></i>风险评估及资源调查报告
            </p>

            <div class="infor estimate">
                <div class="form-container">
                    <!-- <ul
                        class="clearfix steps"
                        style="margin-bottom:50px;margin-top:30px;"
                    >
                        <li class="steps-active" @click="goToPage(0)">
                            <span>1</span>
                            <p>风险信息</p>
                            <p class="info_note clearfix">
                                <i class="el-icon-warning-outline"></i>
                                <span
                                    >请录入单位涉及的全部风险信息再进入下一步，否则可能导致推荐的应急预案不完整！</span
                                >
                            </p>
                        </li>
                        <li class="steps-active" @click="goToPage(1)">
                            <span>2</span>
                            <p style="margin-left:-13px;">应急资源信息</p>
                            <p class="info_note clearfix">
                                <i class="el-icon-warning-outline"></i>
                                <span
                                    >请正确填写应急资源信息，该信息会自动更新到应急预案中！</span
                                >
                            </p>
                        </li>
                        <li class="steps-active" @click="goToPage(2)">
                            <span>3</span>
                            <p>报告信息</p>
                            <p class="info_note clearfix">
                                <i class="el-icon-warning-outline"></i>
                                <span
                                    >请正确填写单位基本信息，该信息会自动更新到对应的应急预案中！</span
                                >
                            </p>
                        </li>
                    </ul> -->
                    <p class="table-title">风险评估及资源调查报告</p>
                    <el-table
                        ref="multipleTable"
                        :data="reportList"
                        tooltip-effect="dark"
                        v-loading.lock="loadings"
                        element-loading-spinner="el-icon-loading"
                    >
                        <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="name"
                            label="文件清单"
                            :show-overflow-tooltip="true"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作"
                            align="center"
                            width="480"
                        >
                            <template slot-scope="scope">
                                <div class="div-edit">
                                    <el-button
                                        @click="scan(scope.row)"
                                        class="newleft detail-btn"
                                    >
                                        <i class="el-icon-search"></i>查看
                                    </el-button>

                                    <div class="newmsg1">
                                        <iframe
                                            :src="
                                                $baseUrl +
                                                    'emergency/v1.0/report/index/' +
                                                    scope.row.id +
                                                    ',' +
                                                    scope.row.type
                                            "
                                            width="85"
                                            height="40"
                                            frameborder="0"
                                        ></iframe>
                                    </div>
                                    <el-button
                                        class="newright detail-btn"
                                        @click="exportReportlist(scope.row)"
                                    >
                                        <i class="el-icon-upload2"></i>导出
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="bts" style="width:136px;">
                    <el-button @click="$router.go(-1)" class="cancel"
                        >上一步</el-button
                    >
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>

<script>
import Header from "../common/header";
import Footer from "../common/footer";
export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            testFlag: false,
            dialogVisible: false,
            modeType: ["内部应急组织机构", "外部应急救援队伍", "应急物资装备"],
            activeIndex2: -1,
            activeIndex: -1,
            formInline: {
                user: "",
                region: ""
            },
            reportList: [],
            loadings: false,
            navChildren: []
        };
    },
    created () {
        this.navChildren = JSON.parse(this.$route.query.navChildren)
        this.getReportlist();
        this.loadings = true;
    },
    methods: {
        goToPage (index) {
            this.$router.push({
                path: this.navChildren[index].menuUrl,
                query: {
                    navIndex: this.$route.query.navIndex,
                    navChildren: this.$route.query.navChildren
                }
            })
        },
        getReportlist () { //获取报告数据
            let companyId = JSON.parse(localStorage.getItem("user")).companyId;
            this.$axios({
                method: "get",
                url:
                    this.$baseUrl +
                    "emergency/v1.0/company/reports/" +
                    companyId
                // data:params
            }).then(res => {
                this.loadings = false;
                var obj = res.data.data;
                this.reportList = [
                    {
                        id: obj.id,
                        name: JSON.parse(obj.accidentReportFile).fileName,
                        url: obj.accidentReportUrl,
                        type: 1
                    },
                    {
                        id: obj.id,
                        name: JSON.parse(obj.resourceReportFile).fileName,
                        url: obj.resourceReportUrl,
                        type: 2
                    }
                ];
            });
        },
        scan (res) { //查看报告
            console.log(res);
            window.open(res.url, "_blank");
        },
        exportReportlist (res) { //导出报告
            console.log(res)
            this.$axios({
                method: "get",
                url: this.$baseUrl + "emergency/v1.0/company/report/export/" + res.id + '/' + res.type,
            }).then(res => {
                if (res.data.meta.success) {
                    const iframe = document.createElement("iframe");
                    iframe.style.display = "none"; // 防止影响页面
                    iframe.style.height = 0; // 防止影响页面
                    iframe.src = res.data.data;
                    document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
                    // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
                    setTimeout(() => {
                        iframe.remove();
                    }, 5 * 60 * 1000);
                } else {
                    this.$message.warning(res.data.meta.message);
                }
            })
                .catch(res => {
                    console.log(res);
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.estimate {
    padding-bottom: 200px;
    .form-container {
        padding: 0 0 10px;
        margin: 0 auto;
        .epList {
            width: 370px;
            margin: 70px auto;
            height: 42px;
            border: 1px solid #4080ff;
            border-radius: 8px;
            li {
                float: left;
                width: 50%;
                a {
                    display: block;
                    color: #666;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                }
                a.active {
                    color: #fff;
                    background: #4080ff;
                }
                a.active:hover {
                    color: #fff;
                }
                a:hover {
                    color: #4080ff;
                }
            }
            li:first-child {
                a {
                    border-radius: 6px 0 0 6px;
                }
            }
            li:last-child {
                a {
                    border-radius: 0 6px 6px 0;
                }
            }
        }
        .el-table {
            width: calc(100% - 200px);
            margin: 0 auto;
            border-top: 1px solid #ebeef5;
            td {
                padding: 0;
                height: 48px;
                line-height: 48px;
            }
            .div-edit {
                padding-left: 95px;
                .el-button {
                    color: #3f80ff;
                    background: #f6f9ff;
                    border: 0;
                    margin: 5px 0 0 10px;
                }
            }
        }
        .page-container {
            width: 620px;
            margin: 50px auto;
            padding: 0;
        }
    }
}
.newleft {
    float: left;
}
.newright {
    float: left;
}
.newmsg1 {
  width: 85px;
  height: 40px;
  float: left;
  border-radius: 8px;
  border: 1px solid #4180ff;
  margin-top: 5px;
  margin-left: 10px;
  padding-top: 2px;
  padding-left: 2px;
}
.expoBtn {
    text-align: right;
    margin-top: 20px;
    .submit {
        display: inline-block;
        border-radius: 8px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        height: 36px;
        width: 85px;
        color: #fff;
        border: none;
        cursor: pointer;
        background: #4080ff;
       /* background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
    }
    .submit:hover {
        opacity: 0.8;
    }
}
.estimate .table-title {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #666666;
    text-align: center;
    margin: 48px 0 24px 0;
}
</style>
